<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>牛皮小系统</title>
    <!-- 引入通用的js, css等 -->
    <jsp:include page="${request.contextPath}/static/include.jsp" flush="true" />
</head>
<body>
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <%-- 二维码 --%>
            <div class="layui-col-md3" id="encodeQrcodeDiv">
                <div class="layui-card" style="height: 94%; overflow-y: auto">
                    <div class="layui-card-header">生成二维码</div>
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" id="generator_qrcode_form">
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">二维码内容</label>
                                <div class="layui-input-block">
                                    <textarea class="qrcodeMsg layui-textarea" name="qrcodeMsg" cols="30" rows="10" placeholder="请输入一些文字...这是二维码要携带的内容"></textarea>
                                </div>
                            </div>
                        </form>
                        <div class="layui-form-item">
                            <button class="layui-btn" lay-submit="" lay-filter="generator_qrcode_submit">出来吧!二维码!</button>
                            <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
                        </div>
                        <img class="qrcodePic layui-upload-img" style="height: 200px; width: 200px; border: 1px solid #f0f0f0">
                        <div>
                            这里返回的图片实现是直接将流返回，而不是先把图片保存在服务器，在用虚拟路径访问
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3" id="decodeQrcodeDiv">
                <div class="layui-card" style="height: 94%; overflow-y: auto">
                    <div class="layui-card-header">解析二维码</div>
                    <div class="layui-card-body">
                        <div class="layui-upload">
                            <div class="layui-upload-list">
                                <img class="previewUploadPic layui-upload-img" style="height: 200px; width: 200px; border: 1px solid #f0f0f0">
                                <p class="uploadHintText"></p>
                            </div>
                            <button type="button" class="uploadBtn layui-btn layui-btn-normal">上传二维码</button>
                            <button type="button" class="uploadCommit layui-btn" >来吧!解析二维码的内容!</button>
                        </div>
                    </div>
                    <div>
                        <span>解析结果：</span>
                        <span class="parseResult"></span>
                    </div>
                </div>
            </div>

            <%-- 条形码 --%>
            <div class="layui-col-md3" id="encodeBarcodeDiv">
                <div class="layui-card" style="height: 94%; overflow-y: auto">
                    <div class="layui-card-header">生成条形码</div>
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" id="generator_barcode_form">
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">条形码内容</label>
                                <div class="layui-input-block">
                                    <textarea  class="barcodeMsg layui-textarea" name="barcodeMsg" cols="30" rows="10" placeholder="请输入一些文字...这是条形码要携带的内容"></textarea>
                                </div>
                            </div>
                        </form>
                        <div class="layui-form-item">
                            <button class="layui-btn" lay-submit="" lay-filter="generator_barcode_submit">出来吧!条形码!</button>
                            <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
                        </div>
                        <img class="barcodePic layui-upload-img" style="height: 200px; width: 200px; border: 1px solid #f0f0f0">
                        <div>
                            这里返回的图片实现是直接将流返回，而不是先把图片保存在服务器，在用虚拟路径访问
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3" id="decodeBarcodeDiv">
                <div class="layui-card" style="height: 94%; overflow-y: auto">
                    <div class="layui-card-header">解析条形码</div>
                    <div class="layui-card-body">
                        <div class="layui-upload">
                            <div class="layui-upload-list">
                                <img class="previewUploadPic layui-upload-img" style="height: 200px; width: 200px; border: 1px solid #f0f0f0">
                                <p class="uploadHintText"></p>
                            </div>
                            <button type="button" class="uploadBtn layui-btn layui-btn-normal">上传条形码</button>
                            <button type="button" class="uploadCommit layui-btn">来吧!解析条形码的内容!</button>
                        </div>
                    </div>
                    <div>
                        <span>解析结果：</span>
                        <span id="parseResult"></span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

<script>
    layui.use(['form', 'upload'], function(){
        var $ = layui.jquery,
            form = layui.form
            ,layer = layui.layer
            ,upload = layui.upload;

        //监听提交，生成条形码
        form.on('submit(generator_barcode_submit)', function(data){
            $("#encodeBarcodeDiv .barcodePic").attr('src', __ctxPath + "/framework/module/Barcode.do?method=generator&barcodeMsg=" + $("#encodeBarcodeDiv .barcodeMsg").val());
            return false;
        });
        //普通图片上传，解析条形码
        var barcodeUploadInst = upload.render({
            elem: '#decodeBarcodeDiv .uploadBtn'
            ,url: __ctxPath + '/framework/module/Barcode.do?method=parse'
            ,auto: false //不自动上传
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#decodeBarcodeDiv .previewUploadPic').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(response){
                if(response.code != RESPONSE_SUCCESS){
                    return layer.msg('解析失败');
                }else{
                    $("#decodeBarcodeDiv .parseResult").html(response.data);
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var uploadHintText = $('#decodeBarcodeDiv .uploadHintText');
                uploadHintText.html('<span style="color: #FF5722;">解析失败</span> <a class="layui-btn layui-btn-xs upload-reload">重试</a>');
                uploadHintText.find('.upload-reload').on('click', function(){
                    barcodeUploadInst.upload();
                });
            }
        });
        //将图片提交服务器
        $('#decodeBarcodeDiv .uploadCommit').click(function () {
            barcodeUploadInst.upload();
        })

        /*****************************************************************  我是分割线  *****************************************************************/
        //监听提交，生成二维码
        form.on('submit(generator_qrcode_submit)', function(data){
            console.info( $("#encodeQrcodeDiv .qrcodePic"));
            console.info( $("#encodeQrcodeDiv .qrcodeMsg"));
            $("#encodeQrcodeDiv .qrcodePic").attr('src', __ctxPath + "/framework/module/Qrcode.do?method=generator&qrcodeMsg=" + $("#encodeQrcodeDiv .qrcodeMsg").val());
            return false;
        });
        //普通图片上传，解析二维码
        var qrcodeUploadInst = upload.render({
            elem: '#decodeQrcodeDiv .uploadBtn'
            ,url: __ctxPath + '/framework/module/Qrcode.do?method=parse'
            ,auto: false //不自动上传
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#decodeQrcodeDiv .previewUploadPic').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(response){
                if(response.code != RESPONSE_SUCCESS){
                    return layer.msg('解析失败');
                }else{
                    $("#decodeQrcodeDiv .parseResult").html(response.data);
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var uploadHintText = $('#decodeQrcodeDiv .uploadHintText');
                uploadHintText.html('<span style="color: #FF5722;">解析失败</span> <a class="layui-btn layui-btn-xs upload-reload">重试</a>');
                uploadHintText.find('.upload-reload').on('click', function(){
                    qrcodeUploadInst.upload();
                });
            }
        });
        //将图片提交服务器
        $('#decodeQrcodeDiv .uploadCommit').click(function () {
            qrcodeUploadInst.upload();
        })
    });

</script>





























